<template>
  <el-dialog
    v-model="props.modelValue"
    width="800px"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ t('crew.recruit.tit') }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>
    <el-form
      ref="formEl"
      class="dialog-form"
      :rules="rules"
      :model="formData"
      :label-width="locale === 'zh-CN' ? '100px' : '160px'"
      :disabled="props.type === 'detail'"
    >
      <el-form-item
        :label="t('crew.recruit.l1')"
        prop="recruitDuties"
      >
        <el-select filterable v-model="formData.recruitDuties">
          <el-option
            v-for="item in dictData.duties"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :label="t('crew.recruit.l4')"
        prop="shippingType"
      >
        <el-select filterable v-model="formData.shippingType">
          <el-option
            v-for="item in dictData.ships_type"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :label="t('crew.recruit.l3')"
        prop="crewLocation"
      >
        <el-select filterable v-model="formData.crewLocation">
          <el-option
            v-for="item in countryOptionList"
            :key="item.countryName"
            :label="item.countryName"
            :value="item.countryName"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :label="t('crew.recruit.l6')"
        prop="navigationArea"
      >
        <el-input
          v-model="formData.navigationArea"
          :placeholder="t('input_p')"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="t('crew.recruit.l5')"
        prop="deadweightTon"
      >
        <el-input
          v-model="formData.deadweightTon"
          :placeholder="t('input_p')"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="t('crew.recruit.l10')"
        prop="yearOfConstruction"
      >
        <el-date-picker
          v-model="formData.yearOfConstruction"
          type="year"
          value-format="X"
          :placeholder="t('select_p')"
        />
      </el-form-item>
      <el-form-item
        :label="t('crew.recruit.l11')"
        prop="onDutyTime"
      >
        <el-date-picker
          v-model="formData.onDutyTime"
          type="date"
          value-format="X"
          :placeholder="t('select_p')"
        />
      </el-form-item>
      <el-form-item
        :label="t('crew.recruit.l9')"
        prop="recruitIllustrate"
      >
        <el-input
          v-model="formData.recruitIllustrate"
          type="textarea"
          resize="none"
          :autosize="{ minRows: 6, maxRows: 6 }"
          :maxlength="500"
          show-word-limit
          :placeholder="t('input_p')"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="t('crew.recruit.l12')"
        prop="recruitOrgan"
      >
        <el-input
          v-model="formData.recruitOrgan"
          :placeholder="t('input_p')"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="t('crew.recruit.l13')"
        prop="recruitContacts"
      >
        <el-input
          v-model="formData.recruitContacts"
          :placeholder="t('input_p')"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="t('crew.recruit.l14')"
        prop="recruitContactsPhone"
      >
        <el-input
          v-model="formData.recruitContactsPhone"
          :placeholder="t('input_p')"
        ></el-input>
      </el-form-item>
      <el-form-item
        :label="t('crew.recruit.l15')"
        prop="recruitContactsEmail"
      >
        <el-input
          v-model="formData.recruitContactsEmail"
          :placeholder="t('input_p')"
        ></el-input>
      </el-form-item>
    </el-form>

    <template
      #footer
      v-if="type === 'add'"
    >
      <div class="dialog-footer flexcc">
        <el-button
          color="#252628"
          plain
          @click="cancel"
        >
          {{ t('cancelText') }}
        </el-button>
        <el-button
          type="primary"
          color="#252628"
          @click="addSave"
        >
          {{ t('confirmText') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { addRecuit, getRecuitDetail } from '@/service/crew.js'
import { countryListApi } from '@/service/common.js'
import { useI18n } from 'vue-i18n'
import useLogin from '@/stores/login'
import useDict from '@/hooks/useDict'

const { t, locale } = useI18n()
const storeLogin = useLogin()
const { dictData, getDictData, getDictLabel } = useDict()

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  itemId: {
    type: [Number],
    default: null
  },
  type: {
    type: String,
    default: 'add'
  }
})

const emit = defineEmits(['update:modelValue', 'getList'])

const handleClose = () => {
  emit('update:modelValue', false)
}

const cancel = () => {
  handleClose()
}

const formEl = ref(null)
const formData = ref({})
const rules = ref({})
const setRules = () => {
  rules.value = {
    recruitDuties: [{ required: true, message: t('select_p'), trigger: 'change' }],
    recruitNumber: [{ required: true, message: t('input_p'), trigger: 'change' }],
    crewLocation: [{ required: true, message: t('select_p'), trigger: 'change' }],
    shippingType: [{ required: true, message: t('select_p'), trigger: 'change' }]
  }
}

const addSave = () => {
  if (!formEl.value) return
  formEl.value.validate((valid, fields) => {
    if (valid) {
      addRecuit({
        ...formData.value,
        enterpriseId: storeLogin.userInfo.enterpriseId
      }).then(({ msg }) => {
        ElMessage.success(msg)
        emit('update:modelValue', false)
        emit('getList')
      })
    }
  })
}

const countryOptionList = ref([])
const getOptionListFn = () => {
  countryListApi().then((res) => {
    countryOptionList.value = res.data
  })
}

const getDetail = () => {
  getRecuitDetail(props.itemId).then(({ data }) => {
    formData.value = data
  })
}

const init = () => {
  getDictData('duties')
  getDictData('ships_type')
  getOptionListFn()
  if (props.type === 'add') {
    setRules()
  }
  if (props.type === 'detail') {
    getDetail()
  }
}

init()
</script>

<style scoped lang="scss">
:deep(.el-select) {
  width: 100%;
}

:deep(.el-input.is-disabled .el-input__wrapper),
:deep(.el-textarea.is-disabled .el-textarea__inner) {
  background-color: #fff;
  box-shadow: none;
}

:deep(.el-input.is-disabled .el-input__inner),
:deep(.el-textarea.is-disabled .el-textarea__inner) {
  &::-webkit-input-placeholder {
    opacity: 0;
  }
}
</style>
